<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="500">
    请更换新版浏览器查看效果!
</canvas>
<script >
    let VSHADER_SOURCE='attribute vec4 a_position;void main(){gl_Position=a_position;gl_PointSize=10.0;}'
    let FSHADER_SOURCE='void main(){gl_FragColor=vec4(1.0, 0.0, 0.0, 1.0);}'

    function main(){
        let canvas=document.getElementById('mybox')
        let gl=getWebGLContext(canvas)
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log('初始化shader失败');
            return;
        }

        let n=initVertexBuffers(gl)
        if(n<0){
            console.log('设置顶点位置失败')
        }
        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.clear(gl.COLOR_BUFFER_BIT)
        gl.drawArrays(gl.POINTS,2,1);


    }

    function initVertexBuffers(gl){
        let vertices=new Float32Array([0.0, 0.5,-0.5, -0.5,0.5, -0.5])
        let n=3
        // 创建缓冲区
        let vertexBuffer=gl.createBuffer()
        if(!vertexBuffer){
            console.log('生成顶点着色器失败');
            return -1;
        }
        // 绑定缓冲区对象,将上一步创建的缓冲区绑定到webGL中已存在的目标上,相当于声明了缓冲区是用来存储什么数据的
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer)
        // 向缓冲区写入对象,将vertices中的数据写入gl.ARRAY_BUFFER上的缓冲区对象,第三个参数指明程序对缓冲区对象中的数据的使用方式
        gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW)
        // 获取到a_position的存储位置
        let a_position=gl.getAttribLocation(gl.program,'a_position')
        if(a_position<0){
            console.log('顶点a_position不存在')
            return;
        }
        // 将缓冲区对象分配给一个attribute变量,将绑定到gl.ARRAY_BUFFER的缓冲区对象分配给由location指定的attribute变量
        //存储位置,缓冲区中每个顶点的分量的个数,数据的类型,是否将非浮点型的数据normalize,相邻两个顶点间的字节数,缓冲区对象的偏移量
        gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,0,0)
        // 开启attribute变量,使顶点着色器能够访问缓冲区内的数据
        gl.enableVertexAttribArray(a_position);
        return n;

    }

</script>

</body>
</html>